<template>
  <div>
    <Card>
      <div  class="search-con search-con-top">
        <!-- <Button style="margin-right: 10px;" type="primary" @click="addOrUpdate = true">添加</Button> -->
        <Button style="margin-right: 10px;" type="primary" @click="exportExcel">导出为Csv文件</Button>
        <Select v-model="searchKey" class="search-col" placeholder="请选择检索项">
          <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="item.key">{{ item.title }}</Option>
        </Select>
        <Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
        <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
      </div>
      
      <tables :height="innerHeight - 250" ref="tables" search-place="top" v-model="tableData" :columns="columns" :loading="tabLoading"/>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="total" size="small" show-elevator show-sizer @on-change="changePage" @on-page-size-change="pageSizeChange"/>
        </div>
      </div>
    </Card>
    <Modal v-model="addOrUpdate" :title="modelTitle" @on-ok="ok" @on-cancel="cancel" :mask-closable="false" width="700">
        <Form ref="addFrom" :model="addFrom" :label-width="100">
            <Row>
                <Col span="12">
                    <FormItem label="字典项编码" prop="valHdsCode" :rules="{required: true, message: '请填写字典项编码', trigger: 'blur'}">
                        <Input v-model="addFrom.valHdsCode" placeholder="请填写字典项编码"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="字典项名称" prop="valHdsName" :rules="{required: true, message: '请填写字典项名称', trigger: 'blur'}">
                        <Input v-model="addFrom.valHdsName" placeholder="填写字典项名称"></Input>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem label="字典项描述" prop="valHdsDesc">
                        <Input v-model="addFrom.valHdsDesc" placeholder="填写字典项描述"></Input>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { tablePublicRequest } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      actionUrl:{
        "BATCH":"smc/base/WeixinUser/saveWeixinUser.json",
  		  "QRY":"smc/base/WeixinUser/queryWeixinUser.json",
  		  "ADD":"smc/base/WeixinUser/addWeixinUser.do",
  		  "DEL":"smc/base/WeixinUser/delWeixinUser.do",
  		  "UPD":"smc/base/WeixinUser/updWeixinUser.do",
  		  "LKUP":"smc/base/WeixinUser/lookupWeixinUser.json",
  		  "LST":"smc/base/WeixinUser/listWeixinUser.json",
  		  "FIND":"smc/base/WeixinUser/findWeixinUser.json"
      },    
      innerHeight:document.body.clientHeight,
      addOrUpdate: false,
      modelTitle:"新增",
      searchKey:"",
      searchValue:"",
      page:1,
      pageSize:10,
      total:0,
      search:{},
      addFrom:{},
      tabLoading:true,
      columns: [
        {title: '微信OpenId', key: 'openIdForWx', sortable: true},
        {title: '名称', key: 'nameForWx', sortable: true},
        {title: '头像', key: 'picForWx',sortable: true,render: (h, params) => {
            return h('div', {
              attrs: {
                style: 'width: 40px;height: 40px;'
              },
            }, [
                h('img', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  attrs: {
                    src:  (params.row.picForWx.indexOf("https")>=0?params.row.picForWx:`https://www.dxbeibei.com/wx.minproject.xiong.html/${params.row.picForWx}`), style: 'width: 40px;height: 40px;border-radius: 2px;'
                  },
                  style: {
                  },
                }),
              ]);
          }},
        {title: '微信号', key: 'numberForWx',sortable: true},
        {title: '电话号码', key: 'phoneForSelf',sortable: true},
        {title: '预留积分', key: 'integralForSelf',sortable: true},
        {
          title: '操作',
          key: 'handle',
          fixed:'left',
          width:80,
          button: [
            // (h, params, vm) => {
            //   return h('Button', {
            //       props: {
            //         type: 'text',
            //         ghost: true
            //       },
            //       attrs:{
            //         style:"padding: 5px 0;"
            //       },
            //       on: {
            //         'click': () => {
            //           tablePublicRequest(this.actionUrl.FIND,{"id":params.row.wxId}).then(res => {
            //             let data = res.data;
            //             if(data.success){
            //               this.addFrom = data.data || {};
            //               this.addOrUpdate = true;
            //             }
            //           })
            //         }
            //       }
            //     }, [
            //       h('Icon', {
            //         props: {
            //           type: 'ios-create',
            //           size: 18,
            //           color: '#000000'
            //         }
            //       })
            //   ])
            // },
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?',
                  transfer:true
                },
                on: {
                  'on-ok': () => {
                    tablePublicRequest(this.actionUrl.DEL,{"id":params.row.wxId}).then(res => {
                      let data = res.data;
                      if(data.success){
                        this.$Message.info('删除成功！');
                        this.handleSearch();
                      }
                    })
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'text',
                    ghost: true
                  },
                  attrs:{
                    style:"padding: 5px 0;"
                  },
                }, [
                  h('Icon', {
                    props: {
                      type: 'md-trash',
                      size: 18,
                      color: '#000000'
                    }
                  })
                ])
              ])
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    ok () {
      delete this.addFrom.createdAt;
      delete this.addFrom.lastedUpdAt;
      let url = this.addFrom.wxId?this.actionUrl.UPD:this.actionUrl.ADD;
      this.modelTitle = this.addFrom.wxId?"修改":"新增";
      
      tablePublicRequest(url,this.addFrom).then(res => {
        let data = res.data;
        if(data.success){
          this.$Message.info(`${this.modelTitle}成功！`);
          this.handleSearch();
          this.addFrom = {};
        }
      })
    },
    cancel () {
        this.addFrom = {};
    },
    changePage (data) {
      this.page = data;
      this.handleSearch();
    },
    pageSizeChange(data){
      this.pageSize = data;
      this.handleSearch();
    },
    handleSearch(){
      this.search = {page: this.page,pagesize: this.pageSize};
      this.search.searchRules=`[{"op":"contains","field":"${this.searchKey}","value":"${this.searchValue}","type":"text"}]`;
      this.setTableData(this.search);
    },
    setTableData(params){
      this.tabLoading = true;
      tablePublicRequest(this.actionUrl.QRY,params).then(res => {
        let data = res.data;
        if(data.success){
          let tdata = data.data;
          this.total = tdata.total;
          this.tabLoading = false;
          this.tableData = tdata.rows||[];
        }
      })
    },
    handleSuccess(res, file){
      // this.$Message.info(res.msg);
      // this.addFrom.provMinImage = res.path;
    },
    handleError(res, file){
      // this.$Message.info(res.msg);
    }
  },
  mounted () {
    this.setTableData({page: this.page,pagesize: this.pageSize});
  }
}
</script>

<style>

</style>
